<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="fontface/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/video-js.min.css">

    <!-- <link rel="stylesheet" href="css/share.css"> -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/ly.css">

    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/echarts.min.js"></script>

    <title>设备管理</title>
</head>

<body>
    <div class="flex">
       <!--菜单-->
     <div class="cp-menu">
        <div class="cp-menu-icon flex flex-pac cff">
            设备管理
        </div>
        <ul class="nav">
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                        src=""
                        alt="">
                    <span class="flex-f1">设备管理</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub active">
                    <li><a href="通道列表.html?sub=0" class="sub-item">通道列表</a></li>
                    <li><a href="设备信息.html?sub=1" class="sub-item">设备信息</a></li>
                </ul>
            </li>
        </ul>
    </div>
        <!--内容-->
        <div class="cp-container">
            <!--头部-->
            <header class="cp-header flex flex-ac">
                <div class="cp-header-content flex-f1">
                    设备检测
                </div>
                <!-- <img class="cp-header-img" src="./images/banner.png" alt=""> -->
                <p class="cp-header-name mr10">liyang</p>
                <input type="submit" class="login-out flex flex-pac" value="退出">
            </header>
            <!--面包屑-->
            <div class="el-breadcrumb flex flex-ac">
                <!-- 设备管理 <span>/</span> 温度曲线 -->
            </div>
            <!--新增专题-->
            <div class="bi-info">
                <div class="flex mb30">
                    <div class="flex-f1">
                        <div class="line-chart mr30" id="line-chart"></div>
                        <div class="tx-c mt10 flex flex-pac">温度曲线 <div class="see-temperature-btn ml20">查看数据</div>
                        </div>
                    </div>
                    <div class="flex-f1">
                        <div class="line-chart" id="line-chart2"></div>
                        <div class="tx-c mt10 flex flex-pac">电压曲线 <div class="see-voltage-btn ml20">查看数据</div>
                        </div>
                    </div>
                </div>
                <div class="temperature-box">
                    <div class="table-title flex flex-pac">
                        <p class="tx-c flex-f1">温度数据</p>
                        <div onclick="tableToExcel(1)" class="temperature-btn ex-btn ml20">导出数据</div>
                    </div>
                    <table class="cp-table">
                        <thead class="cp-table-box">

                        </thead>
                    </table>
                </div>
                <div class="temperature-box">
                    <div class="table-title flex flex-pac">
                        <p class="tx-c flex-f1">电压数据</p>
                        <div onclick="tableToExcel(2)" class="voltage-btn ex-btn ml20">导出数据</div>
                    </div>
                    <table class="cp-table">
                        <thead class="voltage-table-box">

                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    $(function () {
        //从url里边拿数据
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var navIndex = 0, subItemIndex = 0;
        navIndex = GetQueryString("nav");
        subItemIndex = GetQueryString("sub");
        $('.nav .nav-item').eq(navIndex).addClass("active").find('.sub-item').eq(subItemIndex).addClass("active")
        $('.nav .nav-item').click(function () {
            $(this).children().slideDown(1000)
            $(this).siblings().children(".sub").slideUp(1000)
        })
    })


    // echart
    var temperatureData = [
        { point: '1', time: '00:00', value: parseInt(Math.random() * (3) + 2, 10) },
        { point: '1', time: '06:00', value: parseInt(Math.random() * (5) + 5, 10) },
        { point: '1', time: '12:00', value: parseInt(Math.random() * (10) + 10, 10) },
        { point: '1', time: '18:00', value: parseInt(Math.random() * (5) + 5, 10) },
        { point: '1', time: '24:00', value: parseInt(Math.random() * (3) + 2, 10) },
    ],
        voltageData = [],
        xData = [], yData = [], xData2 = [], yData2 = [];
    for (var i = 0; i < 14; i++) {
        voltageData.push({ point: 1 + i, voltage: 8 + i, value: parseInt(Math.random() * (5) + 199 + i, 10) })
    }
    for (var i = 0; i < temperatureData.length; i++) {
        xData.push(temperatureData[i].time);
        yData.push(temperatureData[i].value);
    }
    for (var i = 0; i < voltageData.length; i++) {
        xData2.push(voltageData[i].voltage);
        yData2.push(voltageData[i].value);
    }
    $(function () {
        linchar();
        linchar2();
    });
    window.onresize = function () {
        linchart.resize();
        linchart2.resize();
    }
    //温度折线图 
    var linchart = "";
    function linchar() {
        linchart = echarts.init(document.getElementById("line-chart"));
        option = {
            tooltip: {
                formatter: '{b}&nbsp; {c}°'
            },
            grid: {
                left: '15%',
                right: '15%',
                bottom: '20%',
                top: '20%',

                containLabel: true,
                z: 22
            },
            xAxis: {
                data: xData,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#24214e',
                        width: '1  ',                                                //坐标线的宽度
                    }
                },
            },
            yAxis: {
                name: "（温度）",
                nameTextStyle: {
                    color: "#fff"
                },
                nameLocation: "center",
                nameGap: 30,
                nameRotate: -270,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,//坐标值得具体的颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#24214e',
                        width: '1  ',                                                //坐标线的宽度

                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "#24214e",
                    }
                }

            },
            series: [{
                type: 'line',//max:10 min:0
                data: yData,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 3,//折线宽度
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 1,
                            color: '#508ff6' // 0% 处的颜色
                        }, {
                            offset: 0,
                            color: '#2c137a' // 100% 处的颜色
                        }], false),
                        opacity: 0.4
                    }
                },
            }]
        };
        linchart.setOption(option)
    }
    //电压折线图 
    var linchart2 = "";
    function linchar2() {
        linchart2 = echarts.init(document.getElementById("line-chart2"));
        option = {
            tooltip: {
                formatter: '{b}A&nbsp; {c}v'
            },
            grid: {
                left: '15%',
                right: '15%',
                bottom: '20%',
                top: '20%',

                containLabel: true,
                z: 22
            },
            xAxis: {
                name: "（电流）",
                nameTextStyle: {
                    color: "#fff"
                },
                data: xData2,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#24214e',
                        width: '1  ',                                                //坐标线的宽度
                    }
                },
            },
            yAxis: {
                name: "（电压）",
                nameTextStyle: {
                    color: "#fff"
                },
                nameLocation: "center",
                nameGap: 30,
                nameRotate: -270,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,//坐标值得具体的颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#24214e',
                        width: '1  ',                                                //坐标线的宽度

                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "#24214e",
                    }
                }

            },
            series: [{
                type: 'line',//max:10 min:0
                data: yData2,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 3,//折线宽度
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 1,
                            color: '#508ff6' // 0% 处的颜色
                        }, {
                            offset: 0,
                            color: '#2c137a' // 100% 处的颜色
                        }], false),
                        opacity: 0.4
                    }
                },
            }]
        };
        linchart2.setOption(option)
    }

    // 展示表格
    $('.see-temperature-btn').click(function () {
        $('.temperature-box').eq(0).addClass("active").siblings().removeClass('active');
        //循环遍历，每行加入tr标签，每个单元格加td标签
        let str = `<tr class="flex flex-ac">
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">监测点</div>
                                </th>
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">时间</div>
                                </th>
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">温度</div>
                                </th>
                            </tr>`;
        for (let i = 0; i < temperatureData.length; i++) {
            str += ' <tr class="flex flex-ac bb">';
            for (let item in temperatureData[i]) {
                //增加\t为了不让表格显示科学计数法或者其他格式
                str += `<td colspan="1" rowspan="1" class="table-column flex-f1"><div class="cell">${temperatureData[i][item] + '\t'}</div></td>`;
            }
            str += '</tr>';
        }
        $('.cp-table-box').html(str)
    })
    $('.see-voltage-btn').click(function () {
        $('.temperature-box').eq(1).addClass("active").siblings().removeClass('active');
        //循环遍历，每行加入tr标签，每个单元格加td标签
        let str = `<tr class="flex flex-ac">
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">监测点</div>
                                </th>
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">电流</div>
                                </th>
                                <th colspan="1" rowspan="1" class="table-column flex-f1">
                                    <div class="cell">电压</div>
                                </th>
                            </tr>`;
        for (let i = 0; i < voltageData.length; i++) {
            str += ' <tr class="flex flex-ac bb">';
            for (let item in voltageData[i]) {
                //增加\t为了不让表格显示科学计数法或者其他格式
                str += `<td colspan="1" rowspan="1" class="table-column flex-f1"><div class="cell">${voltageData[i][item] + '\t'}</div></td>`;
            }
            str += '</tr>';
        }
        $('.voltage-table-box').html(str)
    })
    //导出表格
    function tableToExcel(type) {
        //要导出的json数据
        let jsonData = [], str = '';
        if (type == 1) {
            jsonData = temperatureData;
            //列标题
            str = '<tr><td>监测点</td><td>时间</td><td>温度(°)</td></tr>';
        } else {
            jsonData = voltageData;
            //列标题
            str = '<tr><td>监测点</td><td>电流(A)</td><td>电压(v)</td></tr>';
        }

        //循环遍历，每行加入tr标签，每个单元格加td标签
        for (let i = 0; i < jsonData.length; i++) {
            str += '<tr>';
            for (let item in jsonData[i]) {
                //增加\t为了不让表格显示科学计数法或者其他格式
                str += `<td>${jsonData[i][item] + '\t'}</td>`;
            }
            str += '</tr>';
        }
        //Worksheet名
        let worksheet = 'Sheet1'
        let uri = 'data:application/vnd.ms-excel;base64,';

        //下载的表格模板数据
        let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
        //下载模板
        window.location.href = uri + base64(template)
    }
    //输出base64编码
    function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>